<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>07css스프라이트</title>
		
	</head>

	<body>
		<h1>CSS 스프라이트</h1>
		<p>스프라이트 이미지는 사이트에 사용하는 모든 이미지를 하나의 이미지 파일에 만들어 두고<br />
		좌표position을 이용해 특정 부위의 이미지만 보여주는 기법</p>
		<p>웹에서 각각의 이미지를 불러오려면 http요청이 여러번 발생되고<br />
		내려받는데 시간이 소요되므로 전체 사이트로딩 시간이 지연됨<br />
		또한, http요청 발생으로 인해 웹 서버 자원 사용 비용이 증가함 </p>
		<p>CSS 스프라이트 기법을 사용하면 이러한 단점을 해결할 수 있음</p>
		<div style="width: 134px; height: 44px;
					background-image: url('images/sprites.gif');">
		</div>
		<div style="width: 46px; height: 44px;
					background-image: url('images/sprites.gif');">
		</div>
		<div style="width: 43px; height: 44px;
					background-image: url('images/sprites.gif');
					background-position: -47px 0;">
		</div>
		<div style="width: 43px; height: 44px;
					background-image: url('images/sprites.gif');
					background-position: 43px 0;">
		</div>
		<div style="width: 43px; height: 44px;
					background-image: url('images/sprites.gif');
					background-position: -91px 0;">
		</div>
		
		<hr />
		<div style="width: 35px; height: 30px;
					background-image: url('images/iconsprite.png');
					background-position: -102px -62px;">
		</div>
		<div style="width: 35px; height: 30px;
					background-image: url('images/iconsprite.png');
					background-position: -102px -207px;">
		</div>
		<div style="width: 35px; height: 30px;
					background-image: url('images/iconsprite.png');
					background-position: -53px -255px;">
		</div>

	</body>
</html>
